<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import headerUtil from "./base/common/headerUtil.vue";
import productBannerUtil from "./base/product/productBannerUtil.vue";
import productShopUtil from "./base/product/productShopUtil.vue";
import prodcutCommentUtil from "./base/product/prodcutCommentUtil.vue";
import productOtherUtil from "./base/product/productOtherUtil.vue";
import productCartUtil from "./base/product/productCartUtil.vue";
import reqApis from '../req/reqApis.js';

const router = useRouter();

const currentData = ref<any>({
  prodcutCollectBool: false,
  shopCollectBool: false,
  productId: router.currentRoute.value.query.productId,
  headerObj: {
    showType: 6
  },
  asd: false,
  productInfo: {},
  shopInfo: {},
  commentList:[],
  productList:[]
});

const hasProductCollectFn = () => {
  reqApis.hasProductCollectApi({productId: currentData.value.productId}).then((res:any) => {
    currentData.value.prodcutCollectBool = res.data;
  })
};

const saveProductCollectFn = () => {
  reqApis.saveProductCollectApi({productId: currentData.value.productId}).then((res:any) => {
    currentData.value.prodcutCollectBool = true;
  })
};

const cancelProductCollectFn = () => {
  reqApis.cancelProductCollectApi({productId: currentData.value.productId}).then((res:any) => {
    currentData.value.prodcutCollectBool = false;
  })
};


const saveShopCollectFn = (shopId: any) => {
  reqApis.saveShopCollectApi({shopId: shopId}).then((res:any) => {
    currentData.value.shopCollectBool = true;
    currentData.value.shopInfo.fansNum += 1;
  })
};

const cancelShopCollectFn = (shopId: any) => {
  reqApis.cancelShopCollectApi({shopId: shopId}).then((res:any) => {
    currentData.value.shopCollectBool = false;
    currentData.value.shopInfo.fansNum -= 1;
  })
};

const hasShopCollectFn = (shopId: any) => {
  reqApis.hasShopCollectApi({shopId: shopId}).then((res:any) => {
    currentData.value.shopCollectBool = res.data;
    
  })
};

const shopCollect = (obj:any) => {
  if(obj.bool) {
    cancelShopCollectFn(obj.shopId);
  }else{
    saveShopCollectFn(obj.shopId);
  }
}

const getCommentFn = () => {
  let params = {
    productId: currentData.value.productInfo.productId
  };
  reqApis.getCommentInfoListApi(params).then((res:any) => {
    currentData.value.commentList = res.data;
  })
};

 const getProductByShopIdFn = () => {
  let params ={
    shopId: currentData.value.productInfo.shopId
  }
  reqApis.getProductByShopIdApi(params).then((res:any) => {
    if(res.data && res.data.length>0) {
      let arr = []
      res.data.forEach((e:any, i:any) => {
        let temp = res.data.slice(i*9, i*9+9);
        if(temp.length>0){
          currentData.value.productList.push(temp);
        }
      });
    }
  })
};

const getShopInfoFn = () => {
  let params = {
    shopId: currentData.value.productInfo.shopId
  }
  reqApis.getShopApi(params).then((res:any) => {
    currentData.value.shopInfo = res.data;
    hasShopCollectFn( res.data.shopId);
  });
};
const getProductFn = () => {
  let params = {
    productId: currentData.value.productId
  };
  reqApis.getProductByIdApi(params).then((res:any) => {
    currentData.value.productInfo = res.data;
    getShopInfoFn();
    getCommentFn();
    getProductByShopIdFn();
  })
};

const changeId = (id:any) => {
  currentData.value.productId=id;
  router.replace({path: "/productDetail", query: {productId: id}})
  getProductFn();
};
const imgs = (str:any) => {
  let arr = [];
  if(str){
    arr = str.split(',');
  }
  return arr;
};

const changeProductCollect = () => {
  if(currentData.value.prodcutCollectBool) {
    cancelProductCollectFn();
  }else{
    saveProductCollectFn();
  }
}

   
    

    
    
const headerFn = (i:any) => {
//   // if(i == 0) {
//   //   history.back();
//   // }
//   // console.log(i);
// },
// scrollData(){

};


hasProductCollectFn();
getProductFn();
</script>
<template>
  <section class="productDetail" v-if="currentData.productInfo">
    <headerUtil :obj="currentData.headerObj" @myClick="headerFn"></headerUtil>
    <div class="content" @scroll.passive="scrollData" ref="scrollOut">
      <productBannerUtil :imgArr="[currentData.productInfo.productIcon]"></productBannerUtil>
      <div class="desc-wrap">
        <div class="desc">{{currentData.productInfo.productDescription}}</div>
        <div class="concern">
          <div class="img-icon" :class="{'active': currentData.prodcutCollectBool}" @click="changeProductCollect()"></div>
          <div class="text">关注</div>
        </div>
      </div>
      <div class="price-wrap">
        <div class="old-price">￥<span>{{currentData.productInfo.productPrice}}</span>.00</div>
        <div class="new-price">￥{{currentData.productInfo.fansPrice}}.00</div>
        <div class="fans"></div>
        <div class="price-btn">降价提醒</div>
      </div>
      <div class="guide-wrap">
        <div class="guide">关注 {{currentData.shopInfo.shopName}}，立享粉丝价</div>
      </div>
      <productShopUtil @updateShopCollect="shopCollect" v-if="currentData.shopInfo.shopId" :shop="currentData.shopInfo" :shopCollectBool="currentData.shopCollectBool"></productShopUtil>
      <prodcutCommentUtil :list="currentData.commentList"></prodcutCommentUtil>
      <!-- <productOtherUtil @myClick="changeId" :list="currentData.productList"></productOtherUtil> -->
    </div>
    <productCartUtil :obj="currentData.productInfo"></productCartUtil>
  </section>
</template>

<style lang="less" scoped>
.productDetail {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .desc-wrap {
      padding: .1rem 0 .1rem .1rem;
      display: flex;
      background: white;
      .desc {
        flex: 1;
        color: #333;
        font-size: .16rem;
        line-height: .18rem;
        padding-right: .15rem;
      }
      .concern {
        width: .5rem;
        height:.36rem;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        &::after {
          width: 0;
          height: 100%;
          content:"";
          position: absolute;
          top: 0;
          left:0;
          border-left:.01rem solid #ddd;
        }
        .img-icon {
          width: .22rem;
          height: .21rem;
          background: url("../assets/images/cart-icon-6.png") no-repeat;
          background-size: 1rem 1rem;
          background-position: -.5rem -.03rem;
          margin-bottom: .1rem;
          &.active {
            background-position: -.5rem -.26rem;
          }
        }
        .text {
          font-size: .1rem;
          color: #333;
          text-align: center;
        }
      }
    }
    .price-wrap {
      background: white;
      padding: 0 .1rem .04rem;
      display: flex;
      align-items: flex-end;
      position: relative;
      margin-bottom: .1rem;
      .old-price {
        font-size: .12rem;
        color: #e4393c;
        line-height: 1.3;
        margin-right: .02rem;
        span {
          font-size: .18rem;
        }
      }
      .new-price {
        height: .15rem;
        font-weight: 400;
        font-size: .12rem;
        color: #714aff;
      }
      .fans {
        width: .3rem;
        height: .2rem;
        background: url("../assets/images/fans-icon-1.png") no-repeat center;
        background-size: contain;
        margin-top: -.02rem;
      }
      .price-btn {
        width:.6rem;
        height: .2rem;
        font-size: .12rem;
        text-align: center;
        line-height: 20px;
        color: #333;
        position: absolute;
        right: .1rem;
        &::after{
          content: "";
          display: block;
          border: .01rem solid #ddd;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }
    }
    .guide-wrap {
      padding: .05rem .1rem;
      background: white;
      margin-bottom: .1rem;
      .guide {
        height:.3rem;
        line-height: .3rem;
        font-size: .12rem;
        color: #666;
        background: #eff1f3;
        padding: 0 .1rem;
        border-radius: .02rem;
        position: relative;
        &::after {
          position: absolute;
          content:"";
          left: 40%;
          top: -5px;
          display: block;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 5px solid #efefef;
        }
        span {
          color: #e4393c;
        }
      }
    }
  }
}
</style>
